<template>
  <t-skeleton :loading="loadingSkeleton" animation="gradient" :row-col="skeletonStyle">
    <!-- 500 -->
    <result v-if="isError" title="500 Internal Server Error" type="500" tip="抱歉，服务器出错啦" />
    <t-space v-else direction="vertical">
      <!-- 阶段 -->
      <stage />
      <!-- 描述 -->
      <descriptions />
      <!-- 标签栏 -->
      <tab-bar />
      <!-- 施工节点 -->
      <engineering-node v-if="engineeringDetails.selectedTab === '施工节点'" />
      <engineering-img v-if="engineeringDetails.selectedTab === '施工图片'" />
      <!-- 材料进度 -->
      <material-speed v-if="engineeringDetails.selectedTab === '材料进度'" />
      <!-- 洽商变更 -->
      <discuss-log v-if="engineeringDetails.selectedTab === '洽商变更'" />
      <!-- 验收单 -->
      <inspect v-if="engineeringDetails.selectedTab === '验收单'" />
      <!-- 回访记录 -->
      <Record v-if="engineeringDetails.selectedTab === '回访记录'" :injectKey="'engineeringDetails'" />
      <!-- 报价信息 / 预算复核 -->
      <!-- <budget-config
        v-if="engineeringDetails.selectedTab === '报价信息' || engineeringDetails.selectedTab === '预算复核'"
        :engineering-id="engineeringDetails.id"
        :company-id="engineeringDetails.companyId"
      /> -->
      <!-- 材料分析 -->
      <!-- <material-analysis v-if="engineeringDetails.selectedTab === '材料分析'" :engineering-id="engineeringDetails.id" /> -->
      <!-- 人工费用分析 -->
      <!-- <labor-costs-analysis v-if="engineeringDetails.selectedTab === '人工费用分析'" :engineering-id="engineeringDetails.id" /> -->
      <!-- 合同信息 -->
      <contract-info v-if="engineeringDetails.selectedTab === '合同信息'" :injectKey="'engineeringDetails'" />
      <!-- 施工结算 -->
      <EngineeringSettlement v-if="engineeringDetails.selectedTab === '施工结算'"/>
      <!-- 延期单 -->
       <ExtensionFile v-if="engineeringDetails.selectedTab === '延期单'"/>
       <!-- 设计信息 -->
      <DesignInfo v-if="engineeringDetails.selectedTab === '设计信息'"/>
      <!-- 产品进度-产品 -->
      <product-speed v-if="engineeringDetails.selectedTab === '产品进度'" :injectKey="'engineeringDetails'"/>
    </t-space>
  </t-skeleton>
</template>

<script setup lang="ts">
import { MessagePlugin, SkeletonRowCol } from 'tdesign-vue-next';
import { onMounted, provide, ref } from 'vue';

import { engineeringListCRUD } from '@/api/project/engineering';
import Result from '@/components/result/index.vue';
import { useTabsRouterStore } from '@/store';
import disposableParams from '@/utils/disposableParams';

// import TwoSee from '../../design/components/TwoSee.vue';
import Descriptions from './Descriptions.vue';
import Stage from './Stage.vue';
import TabBar from './TabBar.vue';
import EngineeringNode from './EngineeringNode.vue';
import MaterialSpeed from './MaterialSpeed.vue';
import DiscussLog from './DiscussLog.vue';
import Inspect from './Inspect.vue';
import ContractInfo from '@/pages/finance/contract/components/ContractInfo.vue';
import Record from '@/pages/order/details/components/Record.vue';
import EngineeringSettlement from './EngineeringSettlement.vue';
import ExtensionFile from './ExtensionFile.vue';
import DesignInfo from './DesignInfo.vue';
import EngineeringImg from './EngineeringImg.vue';
import ProductSpeed from '@/pages/order/product/components/ProductSpeed.vue';
import maskPhone from '@/utils/maskPhone'
// 标签路由仓库
const tabsRouterStore = useTabsRouterStore();
// props
const props = defineProps({
  // 施工id
  id: {
    type: Number,
    required: true,
  },
});
// 加载骨架屏
const loadingSkeleton = ref(true);
// 骨架屏样式
const skeletonStyle: SkeletonRowCol = [
  { height: '100px' },
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
  ],
  {
    height: '300px',
  },
];
// 订单详情
const engineeringDetails = ref<Record<string, any>>({});
// 依赖注入
provide<Record<string, any>>('engineeringDetails', engineeringDetails);
// 修改标签路由标题
const editTabRouteTitle = () => {
  const tabRoute = tabsRouterStore.tabRouterList.find(
    (item) => item.name === 'EngineeringDetails' && Number(item.params.id) === engineeringDetails.value.id,
  );
  if (tabRoute) {
    tabRoute.title = `${engineeringDetails.value.customerName} - ${maskPhone(engineeringDetails.value.phone) || engineeringDetails.value.wxCode}`;
  }
};
// 是否错误
const isError = ref(false);
// 处理获取订单详情
const handleGetEngineeringDetails = () => {
  loadingSkeleton.value = true;
  const params = {
    id: props.id,
  };
  engineeringListCRUD
    .get(params)
    .then((data) => {
      // 订单详情跳转参数
      const engineeringDetailsJumpParams = disposableParams.get(`engineering-details-jump-params-${props.id}`);
      data.currentStage = data.stage; // 设置当前订单阶段
      data.operateType = engineeringDetailsJumpParams.operateType; // 设置操作类型
      data.approveType = engineeringDetailsJumpParams.approveType; // 设置审批类型
      engineeringDetails.value = data;     
      editTabRouteTitle();
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
      isError.value = true;
    })
    .finally(() => {
      loadingSkeleton.value = false;
    });
};
onMounted(() => {
  handleGetEngineeringDetails();
});
</script>
